<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
    <div id="app">
        <el-form :inline="true"  class="demo-form-inline" style="margin-left: 400px;margin-top: 40px">
            <el-form-item label="敏感词">
                <el-input v-model="searchBad.bname" placeholder="敏感词"></el-input>
            </el-form-item>

            <el-form-item>
                <el-select v-model="value" placeholder="请选择" @change="GetChange">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBad">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="empty">清空</el-button>
            </el-form-item>
        </el-form>

        <el-table
                :data="BadWords"
                style="width: 100%;margin-left: 400px">
            <el-table-column
                    prop="bid"
                    label="序号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="bname"
                    label="敏感词"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="level"
                    label="级别"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="80">
                <template slot-scope="scope">
                    <p >{{scope.row.status==1?'可用':'不可用'}}</p>
                </template>
            </el-table-column>

            <el-table-column label="操作"
                             width="280">
                <template slot-scope="scope">
                    <el-button
                            @click="handleEdit(scope.row)">编辑</el-button>

                    <el-popconfirm
                            title="你确定要禁用该敏感词？" @confirm="delConfirm(scope.row)"
                    >
                        <el-button type="danger" slot="reference">禁用</el-button>
                    </el-popconfirm>

                    <el-popconfirm
                            title="你确定要启用该敏感词？" @confirm="keConfirm(scope.row)"
                    >
                        <el-button type="success" slot="reference">启用</el-button>
                    </el-popconfirm>
                </template>

            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="block" style="margin-left: 700px;margin-top: 30px">
            <el-pagination
                    layout="prev, pager, next"
                    :page-size="page.size"
                    @current-change="changPage"
                    :total="page.total">
            </el-pagination>
        </div>

        <!--弹框-->
        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            敏感词：
                <el-input v-model="dialogBad.bname" placeholder="敏感词" style="margin-bottom: 20px"></el-input>
            级别：<br>
                <el-select v-model="dialogValue" placeholder="请选择" @change="dialogChange(dialogValue)">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogConfirm">确 定</el-button>
  </span>
        </el-dialog>
    </div>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            page:{page:1,size:6,total:0},
            BadWords:'',
            options: [{
                value: '1',
                label: '低'
            }, {
                value: '2',
                label: '中'
            }, {
                value: '3',
                label: '高'
            }],
            value: '',
            searchBad:{bname:'',level:''},
            centerDialogVisible:false,
            dialogBad:'',
            dialogValue:'',
        },
        created(){
            this.getBadWords();
        },
        methods:{
            onSubmit() {
                console.log('submit!');
            },
            //查到敏感词
            getBadWords(){
                axios.post(`../../other/badword/getAllBadWord?page=${this.page.page}&size=${this.page.size}`,this.searchBad).then(res=>{
                   this.BadWords=res.data.data.records;
                   this.page.total=res.data.data.total;
                })
            },
            //清空
            empty(){
                this.searchBad={bname:'',level:''}
                this.value=""
            },
            //新增
            addBad(){
                axios.post(`../../other/badword/addBadWord`,this.searchBad).then(res=>{
                  if(res.data.code==-2){

                    this.$message.error(res.data.message);
                  }else{
                     this.$message.success(res.data.message);
                      this.getBadWords();
                  }
                  this.searchBad.bname=""
                })
            },
            //修改
            dialogConfirm(){
                axios.post(`../../other/badword/updateBadWord`,this.dialogBad).then(res=>{
                   if(res.data.code==1){
                       this.$message.success(res.data.message);
                       this. dialogBad='';
                       this.dialogValue='';
                   }else{
                       this.$message.error(res.data.message);
                   }
                    this.centerDialogVisible=false;
                })
            },
            //禁用
            delConfirm(row){
               if(row.status==-1){
                   this.$message.error("该敏感词已经禁用了，不可重复操作");
                   return;
               }
                axios.post(`../../other/badword/delBadWord?bid=${row.bid}&status=${-1}`).then(res=>{
                   if(res.data.code==1){
                       this.$message.success(res.data.message);

                   }else{
                       this.$message.error(res.data.message);
                   }
                    this.getBadWords();
                })
            },
            //启用
            keConfirm(row){
                if(row.status==1){
                    this.$message.error("该敏感词已经启用了，不可重复操作");
                    return;
                }
                axios.post(`../../other/badword/delBadWord?bid=${row.bid}&status=${1}`).then(res=>{
                    if(res.data.code==1){
                        this.$message.success(res.data.message);

                    }else{
                        this.$message.error(res.data.message);
                    }
                    this.getBadWords();
                })
            },
            //查询
            query(){
                this.getBadWords();
            },
            //分页
            changPage(page){
                this.page.page=page;
                this.getBadWords();
            },
            GetChange(){
                if(this.value==1){
                    this.searchBad.level='低';
                }else if(this.value==2){
                    this.searchBad.level='中';
                }else{
                    this.searchBad.level='高';
                }
            },
            handleEdit(row){
               this.centerDialogVisible = true;
               this.dialogBad=row;
               if(this.dialogBad.level=="低"){
                   this.dialogValue='1';
               }else if(this.dialogBad.level=="中"){
                   this.dialogValue='2';
               }else if(this.dialogBad.level=="高"){
                   this.dialogValue='3';
               }

            },
            dialogChange(val){
                if(val==1){
                    this.dialogBad.level='低';
                    console.log(this.dialogBad)
                }else if(val==2){
                    this.dialogBad.level='中';
                    console.log(this.dialogBad)
                }else{
                    this.dialogBad.level='高';
                    console.log(this.dialogBad)
                }
            },


        }
    })
</script>
</body>
</html>